<template>
  <div class="manage">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="作品管理" name="1">
        <div>
          <el-table :data="works_list" border style="width: 100%">
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="url" label="预览图" width="180">
              <template slot-scope="scope">
                <img
                  :src="scope.row.url"
                  alt=""
                  style="max-width: 165px; max-height: 120px;"
                />
                <!-- <span :v-for="item in scope.row.tags"> </span> -->
              </template>
            </el-table-column>

            <el-table-column prop="tags" label="所属分类">
              <template slot-scope="scope">
                <span v-for="item in scope.row.tags" :key="item.id">
                  <el-tag style="margin-right:5px">{{ item.name }}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="delete_work(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="分类管理" name="2">
        <div>
          <el-table :data="tag_list" border style="width: 100%">
            <el-table-column prop="name" label="分类" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="add_tag"
                  >新增</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="delete_tag(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="收藏管理" name="3">
        <div>
          <el-table :data="collection_list" border style="width: 100%">
            <el-table-column prop="work_id.name" label="作品名称" width="180">
            </el-table-column>
            <el-table-column
              prop="work_id.user_id.username"
              label="作者名称"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="work_id.tags" label="所属分类">
              <template slot-scope="scope">
                <span v-for="item in scope.row.work_id.tags" :key="item.id">
                  <el-tag style="margin-right:5px">{{ item.name }}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                > -->
                <el-button
                  size="mini"
                  type="danger"
                  @click="delete_collection(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-dialog title="修改作品信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" :label-width="formLabelWidth">
          <el-select
            v-model="tags"
            multiple
            filterable
            clearable
            placeholder="请选择上传的分类"
            style="width:555px"
          >
            <el-option
              v-for="item in tag_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modiyf_works">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "../request/index";
import qs from "qs";
export default {
  name: "more",
  data() {
    return {
      userinfo: "",
      tag_list: [],
      collection_list: [],
      works_list: [],
      activeNames: [],
      tags: [],
      dialogFormVisible: false,
      form: {
        name: "",
        tags: [],
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleChange(val) {
      // console.log(val);
    },
    get_userinfo() {
      this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    },
    get_user_tag() {
      if (this.userinfo) {
        request({
          url: "/works/get-user-tag/",
          params: {
            user_id: this.userinfo.id,
          },
        })
          .then((res) => {
            this.tag_list = res.data;
          })
          .catch((err) => {
            this.$message.error("请求失败/works/get-user-tag/");
          });
      } else {
        this.$message.error("请先登录");
        this.$router.push({
          name: "login",
        });
      }
    },
    get_user_works() {
      request({
        url: "/works/get-works-by-user-id/",
        params: {
          user_id: this.userinfo.id,
        },
      })
        .then((res) => {
          this.works_list = res.data;
        })
        .catch((err) => {
          this.$message.error("请求失败/works/get-works-by-user-id/");
        });
    },
    get_user_collection() {
      request({
        url: "/works/get-user-collection/",
        params: {
          user_id: this.userinfo.id,
        },
      })
        .then((res) => {
          this.collection_list = res.data;
        })
        .catch((err) => {
          this.$message.error("请求失败/works/get-user-collection/");
        });
    },
    modiyf_works() {
      var data = {
        id: this.form.id,
        name: this.form.name,
        tags: JSON.stringify(this.tags),
      };
      request({
        method: "post",
        url: "/works/modify-work/",
        data: qs.stringify(data),
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("修改成功");
            this.get_user_works();
          }
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          this.$message.error("请求失败/works/modify-work/");
          this.dialogFormVisible = false;
        });
    },
    delete_work(index, row) {
      var work_id = row.id;
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = {
            id: work_id,
          };
          request({
            url: "/works/delete-work/",
            data: qs.stringify(params),
            method: "post",
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.get_user_works();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error("请求失败/works/delete-work/");
            });
        })
        .catch(() => {});
    },
    add_tag() {
      this.$prompt("请输入想要新增的分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          request({
            url: "/works/add-user-tag/",
            params: {
              user_id: this.userinfo.id,
              name: value,
            },
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("新增成功");
                this.get_user_tag();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    delete_tag(index, row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = {
            id: row.id,
            user_id: this.userinfo.id,
          };
          request({
            url: "/works/delete-user-tag/",
            params: params,
          })
            .then((res) => {
              if (res.code == 200) {
                this.get_user_tag();
                this.$message.success("删除成功");
              }
            })
            .catch((err) => {
              this.$message.error("请求失败/works/delete-user-tag/");
            });
        })
        .catch(() => {});
    },
    delete_collection(index, row) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = {
            id: row.id,
          };
          request({
            url: "/works/delete-collection/",
            data: qs.stringify(params),
            method: "post",
          })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.get_user_collection();
              }
            })
            .catch((err) => {
              this.$message.error("请求失败/works/delete-collection/");
            });
        })
        .catch(() => {});
    },

    handleEdit(index, row) { //获取名字和分类名称显示在模态框
      this.tags = [];
      this.form = row;
      row.tags.map((item) => {
        this.tags.push(item.id);
      });
      this.dialogFormVisible = true; // 显示模态框
      var work_id = row.id;
    },
  },
  created() {
    this.get_userinfo();
    this.get_user_tag();
    this.get_user_works();
    this.get_user_collection();
  },
};
</script>
<style>
body {
  margin: 0;
}
.manage {
  margin: 5px;
}
</style>
